<template>
	<!-- 电梯实时监控/电梯故障记录 -->
	<div class="operationBox heightMax publicbox" v-loading='loading'>
		<el-row :gutter="10">
			<el-col :span="5">
				<div class="colItem">
					<span class="font14 searchCode" style="width: 200px;">设备注册代码：</span>
					<el-input size="mini" @keyup.enter.native="getTableList(1)" placeholder="请输入设备注册代码" clearable v-model="marketingCode"></el-input>
				</div>
			</el-col>
			<el-col :span="5">
				<div class="colItem">
					<span class="font14 searchCode" style="width: 90px;">关注：</span>
					<el-select size="mini" placeholder="请选择" clearable v-model="attentionStatus">
						<el-option v-for="item in attentionStatusArr" :value="item.value" :key="item.value" :label="item.label"></el-option>
					</el-select>
				</div>
			</el-col>
			<el-col :span="5">
				<div class="colItem">
					<span class="font14 searchCode">频繁故障：</span>
					<el-select size="mini"  placeholder="请选择频繁故障" clearable v-model="frequent">
						<el-option  v-for="item in frequentArr" :value="item.value" :key="item.value" :label="item.label"></el-option>
					</el-select>
				</div>
			</el-col>
			<el-col :span="5">
				<div class="colItem">
					<span class="font14 searchCode">故障类型：</span>
					<el-select size="mini" multiple placeholder="请选择故障报警" clearable v-model="facility">
						<el-option :disabled="isDisable" v-for="item in facilityArr" :value="item.value" :key="item.value" :label="item.label"></el-option>
					</el-select>
				</div>
			</el-col>
			<el-button type="primary" icon="el-icon-download" v-if="readDataShow" size="mini">导出全部</el-button>
			<el-button type="primary" icon="el-icon-search" class="fl" @click='getTableList(1)' size="mini">搜索</el-button>
			<el-button icon="el-icon-delete" class="fl" @click='reset' size="mini">重置</el-button>
			<!-- <el-button type="primary" icon="el-icon-arrow-down" size="mini" class="fl">更多条件</el-button> -->
		</el-row>
		<div class="listName">
			<i></i><span class="font14">电梯列表</span>
		</div>
		<div class="tableBox">
			<vueScroll>
				<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @select-all="selectChange"
				 @selection-change="selectChange" style="width: 100%" border header-row-class-name='tableHeader'>
					<el-table-column type="index" class="over" fixed>
					</el-table-column>
					<el-table-column type="selection" min-width="50" fixed>
					</el-table-column>
					<el-table-column label="故障单号" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.sn" placement="top">
								<span class="speSpan">{{scope.row.sn}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="出厂编号" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.manufacturer_number ? String(scope.row.manufacturer_number) : ''"
							 placement="top">
								<span class="speSpan">{{scope.row.manufacturer_number ? scope.row.manufacturer_number : ''}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="报警时间" max-width="120">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.create_time" placement="top">
								<span class="speSpan">{{scope.row.create_time}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="使用地点" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.address" placement="top">
								<span class="speSpan">{{scope.row.address}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="故障类型" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.newAlarm_type.length != 0 ? scope.row.newAlarm_type.join(',') : ''"
							 placement="top">
								<span class="speSpan">{{scope.row.newAlarm_type.length != 0 ? scope.row.newAlarm_type.join(',') : ''}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="外设编号" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.o" placement="top">
								<span class="speSpan">{{scope.row.o}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="注册代码" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.register_code" placement="top">
								<span class="speSpan">{{scope.row.register_code}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="通知人员" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.notify_person" placement="top">
								<span class="speSpan">{{scope.row.notify_person}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label=" 回执状态" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.receipt_status" placement="top">
								<span class="speSpan">{{scope.row.receipt_status}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="通知方式" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.notify_method" placement="top">
								<span class="speSpan">{{scope.row.notify_method}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="操作" min-width="160">
						<template slot-scope="scope">
							<span class="eleBlueColor cursor" style="margin-right: 10px;" @click="lookStatus(scope.row.status_id)">状态查看</span>
							<!-- <span class="eleBlueColor cursor" @click="lookChuZhi(scope.row.id)">处置查看</span> -->
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页器 -->
				<div class="pag">
					<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
					 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</vueScroll>
		</div>
		<el-dialog append-to-body title="处置详情" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-steps :active="2" align-center>
				<el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
				<el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
				<el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
				<el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
			</el-steps>
			<span slot="footer" class="dialog-footer">
				<el-button @click='handleClose'>返 回</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
	} from "@/common.js";
	export default {
		activated() {
			if (!this.newFlag) {
				this.firstMethods()
			}
		},
		mounted() {
			this.firstMethods()
			this.getPermition()
		},
		data() {
			return {
				frequent:'',
				frequentArr:[{value:1,label:'是'}],
				attentionStatus: '',
				attentionStatusArr: [{
					label: '我的关注',
					value: 1
				}, {
					label: '其他',
					value: 0
				},{
					value:2,
					label:'全部',
				}],
				marketingCode: '',
				facility: [],
				newFlag: true,
				facilityArr: [{
						value: 1,
						label: '轿厢报警按钮'
					},
					{
						value: 2,
						label: '电梯困人'
					},
					{
						value: 3,
						label: '非平层停梯'
					},
					{
						value: 4,
						label: '安全回路断路'
					},
					{
						value: 5,
						label: '轿厢冲顶'
					},
					{
						value: 6,
						label: '轿厢蹲底'
					},
					{
						value: 7,
						label: '开门走梯'
					},
					{
						value: 8,
						label: '电梯速度异常'
					},
					{
						value: 9,
						label: '电梯运行时安全回路断路'
					},
					{
						value: 10,
						label: '关门故障'
					},
					{
						value: 11,
						label: '开门故障'
					},
					{
						value: 12,
						label: '轿厢在开锁区域外停止'
					},
					{
						value: 13,
						label: '轿厢意外移动'
					},
					{
						value: 14,
						label: '电动机运转时间限制器动作'
					},
					{
						value: 15,
						label: '楼层位置丢失'
					},
					{
						value: 16,
						label: '其他阻止电梯再启动的故障'
					},
				],
				tableData: [],
				page: 1,
				page_size: 10,
				total: 100,
				loading: true,
				dialogVisible: false,
				pidsArr: [],
				addBtnShow: false,
				complieBtnShow: false,
				deleteBtnShow: false,
				readDataShow: false,
				searchElevatorFaultRecord: ''
			}
		},
		computed: {
			isDisable() {
				if (this.facility.length >= 3) {
					return true
				} else {
					return false
				}
			},
			guzhangArr() {
				if (localStorage.baoYang) {
					let arr = JSON.parse(localStorage.baoYang).list
					return arr.filter((item) => {
						return item.name == '电梯故障记录'
					})
				} else {
					return []
				}
			}
		},
		methods: {
			firstMethods() {
				if (localStorage.searchElevatorFaultRecord) {
					this.searchElevatorFaultRecord = ''
					this.attentionStatus = ''
					this.facility = []
					this.marketingCode = ''
					this.frequent = ''
					this.page = 1
					this.page_size = 10
					if (JSON.parse(localStorage.searchElevatorFaultRecord).id == 1) {
						this.searchElevatorFaultRecord = 1
					}else if(JSON.parse(localStorage.searchElevatorFaultRecord).id == 2){
						this.attentionStatus = 1
					}else if(JSON.parse(localStorage.searchElevatorFaultRecord).id == 11){
						this.frequent = 1
					}
					localStorage.removeItem('searchElevatorFaultRecord')
				}
				this.getTableList()
			},
			reset() {
				this.frequent = ''
				this.searchElevatorFaultRecord = ''
				this.attentionStatus = ''
				this.facility = []
				this.marketingCode = ''
				this.page = 1
				this.page_size = 10
				this.getTableList()
			},
			getPermition() {
				if (this.guzhangArr.length != 0) {
					this.pidsArr = this.guzhangArr[0].pids
				}
				if (this.pidsArr.length > 0) {
					this.pidsArr.map((item) => {
						if (item.desc == 'get') {
							this.readDataShow = true
						}
						if (item.desc == 'put') {
							this.complieBtnShow = true
						}
						if (item.desc == 'delete') {
							this.deleteBtnShow = true
						}
						if (item.desc == 'post') {
							this.addBtnShow = true
						}
					})
				}
			},
			lookStatus(id) {
				localStorage.liftDetailId = JSON.stringify({
					id: id
				})
				let obj = {
					newLabel: '运行实时监控详情',
					index: '/MainView/RealTimeElevatorMonitoring/MonitoringDetails'
				}
				if(id){
					let data = {
						fault:id
					}
					this.axiosPost('/manu/elevator/alarms/repair/',data,(res)=>{
						if(res.code !== 0){
							
							this.$message.error(res.detail.result)
						}
					})
				}
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: 'MonitoringDetails'
				})
			},
			lookChuZhi(id) {
				this.dialogVisible = true
			},
			//关闭处置详情弹窗
			handleClose() {
				this.dialogVisible = false
			},
			//获取表格数据
			getTableList(val) {
				console.log('获取列表')
				if (val) {
					this.page = 1
					this.page_size = 10
				}
				if(this.attentionStatus == 2){
					this.attentionStatus = ''
				}
				this.newFlag = false
				// this.loading = true
				let facility = this.facility.join()
				let params = {
					page: this.page,
					page_size_count: this.page_size,
					register_code: this.marketingCode,
					codes: facility,
					today: this.searchElevatorFaultRecord,
					follow:this.attentionStatus,
					frequent:this.frequent
				}
				console.log(params)
				axiosGet('/manu/elevator/alarms/', params, (res) => {
					console.log(res)
					this.loading = false
					if (res.code == 0) {
						this.total = res.detail.count
						this.tableData = res.detail.results
						this.tableData.map((item) => {
							item.newAlarm_type = item.alarm_type.map((item1) => {
								return item1.value
							})
						})
					} else {
						this.$message({
							type: 'error',
							message: res.detail.result
						})
					}
				})
			},
			find() {
				let obj = {
					newLabel: '电梯故障记录详情',
					index: '/MainView/EleFaultRecordDetails'
				}
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: 'EleFaultRecordDetails'
				})
			},
			//表格
			rowClick(row, column, event) {
				this.$refs.moviesTable.toggleRowSelection(row)
			},
			selectChange() {

			},
			//分页器
			handleSizeChange(size) {
				this.page_size = size
				this.getTableList()
			},
			handleCurrentChange(page) {
				this.page = page
				this.getTableList()
			}
		},
	}
</script>

<style scoped lang="less">
	.colItem {
		display: flex;
		flex-direction: row;

		.searchCode {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 120px;
		}
	}

	.tableBox {
		height: 80%;
		overflow-y: auto;
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
		}

	}
</style>
